<template>
    <div>
        宠物转让管理
    </div>
    <div class="searchBar">
        <el-button type="primary" @click="onSubmit">查询</el-button>
    </div>
    <div>
        <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%"
            max-height="250">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="id" label="预约编号" width="200" />
            <el-table-column prop="petinfo.name" label="用户昵称" width="200" />
            <el-table-column prop="src" label="宠物头像" width="200">
                <template #default="scope">
                    <el-image style="width:80px;height:80px" :src="scope.row.src"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="petinfo.age" label="年龄" width="200" />
            <el-table-column prop="petinfo.kindid" label="品种" width="200">
                <template #default="scope">
                    <span v-if="scope.row.petinfo.kindid == 1">狗</span>
                    <span v-if="scope.row.petinfo.kindid == 0">猫</span>
                </template>
            </el-table-column>
            <el-table-column prop="petinfo.sex" label="性别" width="200">
                <template #default="scope">
                    <span v-if="scope.row.petinfo.sex == 1">雄性</span>
                    <span v-if="scope.row.petinfo.sex == 0">雌性</span>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="宠物描述" width="300" />
            <el-table-column prop="status" label="状态" width="200">
                <template #default="scope">
                    <span v-if="scope.row.status == 1">已领养</span>
                    <span v-if="scope.row.status == 0">待领养</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="300">
                <template #default="scope">
                    <el-button type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-size="pagesize" layout="prev, pager, next, jumper" :total="tableData.length"
            v-if="(tableData.length != 0)">
        </el-pagination>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { getAlltransfer, deletetransfer } from '@/apis/transfers'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import type { Action } from 'element-plus'

const tableData = ref([])

const loading = ref(false);


//查询
const onSubmit = async () => {
    loading.value = true;
    try {
        const transfers: any = await getAlltransfer();
        console.log(transfers);
        for (var i = 0; i < transfers.result.length; i++) {
            var Pic = transfers.result[i].src
            let blob = new Blob([new Uint8Array(Pic.data)], { type: 'image/png' });
            transfers.result[i].src = URL.createObjectURL(blob);
            //首先使用 new Uint8Array(src.data) 将 src.data 转换为一个 Uint8Array
            //然后，使用 new Blob 创建一个 Blob 对象。
            //最后，使用 URL.createObjectURL 创建一个可以在 <img> 标签中使用的 URL。
        }
        tableData.value = transfers.result
        loading.value = true;
    } catch (error) {
        console.log(error);
    }
}


//分页
const pagesize = ref(2)//每页多少个
const handleSizeChange = (size: any) => {
    // console.log(size);     
    pagesize.value = size;
    // console.log(pagesize.value); //每页下拉显示数据
}

const currentPage = ref(1)//默认第几页
const handleCurrentChange = (current: any) => {
    // console.log(current); 
    currentPage.value = current
    // console.log(currentPage.value); //点击第几页
}

//删除
const deleteRow = (index: number) => {
    let data = tableData.value[pagesize.value * (currentPage.value - 1) + index]
    loading.value = true;
    ElMessageBox.confirm(
        '确定要删除这个吗?',
        '警告',
        {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        try {
            const deleteResult: any = await deletetransfer(data.id);
            // if (deleteResult.success) {
            //     ElMessage({
            //         type: 'info',
            //         message: deleteResult.info.msg,
            //     })
            // } else {
            //     ElMessage({
            //         type: 'warning',
            //         message: deleteResult.info.msg,
            //     })
            // }
            loading.close()
            onSubmit()
        } catch (error) {
            loading.close()
            console.log(error)
        }
    }).catch((error) => {
        console.log(error)
    })


}


</script>

<style scoped>
.searchBar {
    margin-top: 20px;
    margin-bottom: 20px;
}

.el-alert {
    margin: 20px 0 0;
}

.el-alert:first-child {
    margin: 0;
}
</style>